import { Input, Select, Form } from "antd";

interface UserProps {
  users: User[];
  param: Param;
  setParam: (param: Param) => void;
}

export interface User {
  id: number;
  name: string;
  token: string;
  // email: string,
  // title: string,
  // organization: string
}

interface Param {
  name: string;
  personId: number;
}

export const SearchPanel = ({ param, setParam, users }: UserProps) => {
  return (
    <Form style={{ marginBottom: "2rem" }} layout="inline">
      <Form.Item>
        <Input
          placeholder={"項目名"}
          type="text"
          value={param.name}
          onChange={(evt) =>
            setParam({
              ...param,
              name: evt.currentTarget.value,
            })
          }
        />
      </Form.Item>

      <Form.Item>
        <Select
          value={param.personId}
          onChange={(value) => {
            setParam({
              ...param,
              personId: value,
            });
          }}
        >
          <Select.Option key={0} value={0}>
            負責人
          </Select.Option>
          {users.map((user) => {
            return (
              <Select.Option key={user.id} value={user.id}>
                {user.name}
              </Select.Option>
            );
          })}
        </Select>
      </Form.Item>
    </Form>
  );
};
